<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" href="/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>北极星</title>
</head>
<body>
<div class="loading-bg" >
    <div class="icon" id="loading-bg-icon" style="visibility:hidden">
        <div class="loader"></div>
    </div>

    <span class="title">北极星</span>
</div>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script type="module">
    import {loadTheme} from "./src/layout/component/ts/ColorSetting";
    loadTheme()
    document.getElementById("loading-bg-icon").style.visibility = "visible"
</script>
</body>
</html>
<style >
  .loading-bg{
    position: absolute;
    z-index: 99999999;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .loading-bg .title{
      font-size: 30px;
      font-weight: bolder;
  }
  .loading-bg .icon{
      height: 200px;
  }
  .loader,
  .loader:before,
  .loader:after {
    background: var(--el-color-primary);
    -webkit-animation: load1 1s infinite ease-in-out;
    animation: load1 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
  }

  .loader {
    color: var(--el-color-primary);
    text-indent: -9999em;
    margin: 88px auto;
    position: relative;
    font-size: 11px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
  }

  .loader:before,
  .loader:after {
    position: absolute;
    top: 0;
    content: '';
  }

  .loader:before {
    left: -1.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
  }

  .loader:after {
    left: 1.5em;
  }

  @-webkit-keyframes load1 {
    0%,
    80%,
    100% {
      box-shadow: 0 0;
      height: 4em;
    }
    40% {
      box-shadow: 0 -2em;
      height: 5em;
    }
  }

  @keyframes load1 {
    0%,
    80%,
    100% {
      box-shadow: 0 0;
      height: 4em;
    }
    40% {
      box-shadow: 0 -2em;
      height: 5em;
    }
  }

</style>
